<template>
  <div class="indexBox">
    <myNav types="2" name="项目"></myNav>
    <div class="home">
      <div class="two">
        <div>
          <contentTitle :myIndex="11"></contentTitle>
          <div class="module-bg myProgress">
            <div class="myEcharts">
              <useEcharts :echartsOption="echartsOption" v-if="echartsOption" @childEvent="useSelectBelongDevelopers"></useEcharts>
            </div>
            <div class="table-footer">
              <myTable :tableArr="selectBelongDevelopersData" :types="2" v-if="selectBelongDevelopersData"></myTable>
            </div>
          </div>
        </div>
        <div class="">
          <contentTitle :myIndex="12"></contentTitle>
          <div class="myProgress module-bg">
            <myProgress :parms="parms" :pageSize="5" :pageNumber="1" types="项目"></myProgress>
          </div>
        </div>
        <div class="relative">
          <contentTitle :myIndex="13"></contentTitle>
          <div class="myProgress module-bg">
            <bar :parms="selectCapitalInfoParms" :type="1" types="项目"></bar>
          </div>
        </div>
        <div class="relative">
          <contentTitle :myIndex="14"></contentTitle>
          <div class="myProgress module-bg">
            <bar :parms="selectCurrencyInfoParms" :type="2" types="项目"></bar>
          </div>
        </div>
      </div>
      <div class="three">
        <div class=" " style="height: 100%">
          <contentTitle :myIndex="5"></contentTitle>
          <div class="myProgress .myProgressz module-bg" style="height: 94.5%">
            <myList :useSelectCapitalInfoParms="useSelectCapitalInfoParms" :type="2"></myList>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import myNav from "@/components/bjBuilding/header/index.vue";
import contentTitle from "@/components/bjBuilding/contentTitle/index.vue";
import myCharts from "@/components/bjBuilding/myCharts/index.vue";
import myTable from "@/components/bjBuilding/myTable/index.vue";
import myProgress from "@/components/bjBuilding/progress/index.vue";
import bar from "@/components/bjBuilding/bar/index.vue";
import myList from "@/components/bjBuilding/myList/index.vue";
import { selectCapitalInfo, selectPropertyProportion, selectBelongDevelopers } from "@/api/bjBuilding";
import { onMounted, ref, reactive } from "vue";
import { xmsjtjqk2 } from "@/utils/echartsData";
import useEcharts from "@/components/bjBuilding/useEcharts/index.vue";

const tableArr = ["集体", "国有", "集体", "国有", "集体"];
const selectCapitalInfoData = ref(null);
const data = ref(null);
const currentFirst = ref(null);
const currentLast = ref(null);
var pagesFirst;
var pagesLast;
const selectBelongDevelopersData = ref(null);
//饼状图option
const echartsOption = ref(null);

// 开发商交付排名参数
const parms = reactive({
  cityName: "",
  level: 2, //1开发商 2项目
  sortField: 1, //1剩余交付 2交付率
  sortWay: 1, //1升序 2降序
});

// 开发商列表参数
const useSelectCapitalInfoParms = reactive({
  pageSize: 20,
  pageNumber: 1,
  sortField: 1, //1保交楼项目数 2贷款前正常施工项目 3贷款前停工项目 4网签备案率
  sortWay: 1, //1升序 2降序
});

// 开发商挪用预售资金排名
const selectCapitalInfoParms = reactive({
  level: 2, //1开发商 2项目
  pageSize: 5,
  pageNumber: 1,
});

// 开发商剩余项目货值排名
const selectCurrencyInfoParms = reactive({
  level: 2, //1开发商 2项目
  pageSize: 5,
  pageNumber: 1,
});
//

//

const subFirst = () => {
  if (currentFirst.value == 1) {
    return;
  } else {
    selectCapitalInfoParms.pageNumber = --currentFirst.value;
  }
};
const addFirst = () => {
  if (currentFirst.value > pagesFirst - 1) {
    return;
  } else {
    selectCapitalInfoParms.pageNumber = ++currentFirst.value;
  }
};
const subLast = () => {
  if (currentLast.value == 1) {
    return;
  } else {
    selectCurrencyInfoParms.pageNumber = --currentLast.value;
  }
};
const addLast = () => {
  if (currentLast.value > pagesLast - 1) {
    return;
  } else {
    selectCurrencyInfoParms.pageNumber = ++currentLast.value;
  }
};

// 项目所属开发商统计

const useSelectBelongDevelopers = async (type) => {
  if (type == 1) {
    await selectBelongDevelopers({}).then((res) => {
      if (res.code == 0) {
        selectBelongDevelopersData.value = res.data;
        echartsOption.value = xmsjtjqk2(res.data);
      }
    });
  } else {
    echartsOption.value = xmsjtjqk2(selectBelongDevelopersData.value);
  }
};

onMounted(() => {
  useSelectBelongDevelopers(1);
});

const someMethod = () => {
  return {
    selectCapitalInfoParms,
    echartsOption,
  };
};
</script>
<style scoped lang="less">
.paging {
  position: absolute;
  bottom: 10px;
  right: 25px;
  font-size: 20px;
  font-weight: 400;
  color: #6a84d9 !important;
}
.home {
  width: 100vw;
  height: 100vh;
  background-image: url("@/assets/img/bjBuilding/bodybg.png");
  background-size: 100% 100%;
  display: grid;
  grid-gap: 28px 50px;
  grid-template-columns: 861px 858px;
  grid-template-rows: 900px;
  place-content: start center;
  // 隐藏滚动条
  overflow: hidden;
  div {
    color: #eee;
  }

  .top {
    grid-column: 1 / 4;
  }

  .three {
    grid-column: 2 / 4;
    box-sizing: border-box;
  }

  .myProgress {
    height: 92%;
    width: 100%;
  }
  .myProgressz {
    height: 94.5% !important;
  }
}
</style>
